<template>
  <el-dialog
    v-model="visable"
    :title="title"
    width="50%"
    :before-close="handleClose"
  >
    <slot></slot>
    <template #footer>
      <span class="dialog-footer">
        <el-button @click="handleClose">{{ cancleTitle }}</el-button>
        <el-button type="primary" @click="handleConfirm">
          {{ confirmTitle }}
        </el-button>
      </span>
    </template>
  </el-dialog>
</template>

<script setup>
import { ref, watch } from "vue";
const props = defineProps({
  //是否显示dialog
  dialogVisable: {
    type: Boolean,
    default: false,
  },
  //取消按钮的标题
  cancleTitle: {
    type: String,
    default: "取消",
  },
  //确认按钮的标题
  confirmTitle: {
    type: String,
    default: "保存",
  },
  //dialog头的标题
  title: {
    type: String,
    default: "",
  },
});
//关闭按钮和确认按钮的回调方法
const emit = defineEmits(["handleClose", "handleConfirm"]);

const visable = ref();

watch(
  () => props.dialogVisable,
  (value) => {
    visable.value = value;
  }
);

//关闭按钮的回调方法
const handleClose = () => {
  emit("handleClose");
};
//确认按钮的回调方法
const handleConfirm = () => {
  emit("handleConfirm");
};
</script>
